<!-- HolandeAnalysis_frame.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>霍兰德职业倾向分析</title>
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			html,body{
				background-color: white;				
			}
			.top-content-f-div{
				padding: 10px;
			}
			.top-content-div{
				border-radius: 14px;
				height: 100px;
				background-color: #f3f5f7;
				overflow: hidden;
				height: 280px;
			}
			.content-table{
				width: 100%;
				border-collapse: separate;
			    border-spacing: 0px;
			    border-color: white;
			}
			.content-tr{
				font-size: 12px;
				text-align: center;
				height: 35px;
			}
			.top-tr{
				background-color: #e14f55;
			}
			.gary-tr{
				background-color: #f3f5f7;
			}
			.pink-tr{
				background-color: #e7868a;
			}
			.black-font{
				color: #333;
			}
			.white-font{
				color: white;
			}
			.dream-job{
				height: 35px;
			}
			.left-span{
				line-height: 35px;
				font-size: 12px;
				margin-left: 10px;
			}
			.right-span{
				line-height: 35px;
				font-size: 12px;
				margin-left: 20px;
			}
			.analysis-chart-div{
				padding: 10px;
				padding-top: 0;
				overflow:hidden;
				zoom:1;
			}
			.have-content-div{
				overflow:hidden;
				zoom:1;
			}
			.analysis-top-left-div{
				width: 64px;
				float: left;
				font-size: 14px;
				color: #333;
			}
			.analysis-top-right-div{
				margin-left: 64px;
			}
			.small-block{
				width: 24px;
				height: 12px;
				border-radius: 2px;
			}
			.analysis-top-sub-left-div{
				width: 50%;
				float: left;
				font-size: 12px;
				color: #333;
				line-height: 12px;
			}
			.analysis-top-sub-right-div{
				width: 50%;
				float: right;
				font-size: 12px;
				color: #333;
				line-height: 12px;
			}
			.bottom-title-div{
				margin-top: 10px;
			}
			.right-title-span{
				position: relative;
				left: 0;
				bottom: 2px;
			}
			.chart-content{
				height: 340px;
			}
			.bottom-btn-div{
				padding: 10px;
				text-align: center;
			}
			.detail-btn{
				width: 120px;
				height: 40px;
				font-size: 16px;
				line-height: 40px;
				background-color: #e14f55;
				color: white;
				border-radius: 4px;
			}
		</style>
	</head>
	<body>
		<div class="top-content-f-div">
			<div class="top-content-div">
				<table class="content-table">
					<tr class="content-tr top-tr white-font">
						<td>倾向分析</td>
						<td>兴趣活动</td>
						<td>擅长活动</td>
						<td>喜欢职业</td>
						<td>总分</td>
					</tr>
					<tr class="content-tr gary-tr black-font">
						<td>R型</td>
						<td id="r1">0</td>
						<td id="r2">0</td>
						<td id="r3">0</td>
						<td id="r4">0</td>
					</tr>
					<tr class="content-tr pink-tr white-font">
						<td>A型</td>
						<td id="a1">0</td>
						<td id="a2">0</td>
						<td id="a3">0</td>
						<td id="a4">0</td>
					</tr>
					<tr class="content-tr gary-tr black-font">
						<td>I型</td>
						<td id="i1">0</td>
						<td id="i2">0</td>
						<td id="i3">0</td>
						<td id="i4">0</td>
					</tr>
					<tr class="content-tr pink-tr white-font">
						<td>S型</td>
						<td id="s1">0</td>
						<td id="s2">0</td>
						<td id="s3">0</td>
						<td id="s4">0</td>
					</tr>
					<tr class="content-tr gary-tr black-font">
						<td>E型</td>
						<td id="e1">0</td>
						<td id="e2">0</td>
						<td id="e3">0</td>
						<td id="e4">0</td>
					</tr>
					<tr class="content-tr pink-tr white-font">
						<td>C型</td>
						<td id="c1">0</td>
						<td id="c2">0</td>
						<td id="c3">0</td>
						<td id="c4">0</td>
					</tr>
				</table>
				<div class="dream-job gary-tr black-font">
					<span class="left-span">
						你的理想职业
					</span>
					<span id="dream_job" class="right-span"></span>
				</div>
			</div>
		</div>
		<div class="analysis-chart-div">
			<div class="analysis-top-div have-content-div">
				<div class="analysis-top-left-div">
					分析结果
				</div>
				<div class="analysis-top-right-div have-content-div">
					<div class="have-content-div">
						<div class="analysis-top-sub-left-div">
							<span class="small-block" style="background-color: #b32225;"></span>
							<span class="right-title-span">你所感兴趣的活动</span>
						</div>
						<div class="analysis-top-sub-right-div">
							<span class="small-block" style="background-color: #243641;"></span>
							<span class="right-title-span">你所擅长的活动</span>
						</div>
					</div>
					<div class="have-content-div bottom-title-div">
						<div class="analysis-top-sub-left-div">
							<span class="small-block" style="background-color: #508f97;"></span>
							<span class="right-title-span">你所喜欢的活动</span>
						</div>
						<div class="analysis-top-sub-right-div">
							<span class="small-block" style="background-color: #c76e52;"></span>
							<span class="right-title-span">总体结果</span>
						</div>
					</div>
				</div>
			</div>
			<div class="analysis-chart-content-div">
				<div id="ganxingqi" class="chart-content"></div>
				<div id="shangchang" class="chart-content"></div>
				<div id="xihuan" class="chart-content"></div>
				<div id="zongti" class="chart-content"></div>
			</div>
			<div class="bottom-btn-div">
				<span id="detail_btn" type="button" class="detail-btn" onclick="toDetailClick()">
					进入详情
				</span>
			</div>
		</div>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_img.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="loadAnalysisData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/echarts_radar.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var detailParam = new Array();
		apiready = function(){
			loadAnalysisData();
		}
		function loadAnalysisData(){
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '',
			    text: '加载中...',
			    modal: false
			});
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				// uid : '8943',
				type : 4
			};
			cfnetppPOST(url_HolanderDetail, params, true, function(data, status){
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						$('.top-content-f-div').show();
						$('.analysis-chart-div').show();
						$('#noData').hide();
						$('#noNet').hide();
						setupAnalysisData(data.data);
					}else{
						$('.top-content-f-div').hide();
						$('.analysis-chart-div').hide();
						$('#noData').show();
						$('#noNet').hide();
					}
				}else{
					$('.top-content-f-div').hide();
					$('.analysis-chart-div').hide();
					$('#noData').hide();
					$('#noNet').show();
				}
			});
		}
		function stringWithNull(string){
			if (string == null) {
				return 0;
			}
			return string;
		}
		//设置数据
		function setupAnalysisData(data){
			//设置职业
			var zhiye = data.zhiye;
			if (zhiye == null) {
				$('#dream_job').text('');
			}else{
				var dreamJob = zhiye.lunshu_answer;
				if (dreamJob == null) {
					$('#dream_job').text('');
				}else{
					$('#dream_job').text(dreamJob);
				}
			}
			//设置兴趣活动
			var second = data.second;
			$('#r1').text(stringWithNull(second.R));
			$('#a1').text(stringWithNull(second.A));
			$('#i1').text(stringWithNull(second.I));
			$('#s1').text(stringWithNull(second.S));
			$('#e1').text(stringWithNull(second.E));
			$('#c1').text(stringWithNull(second.C));
			setupChart(1, second);
			//设置擅长活动
			var third = data.third;
			$('#r2').text(stringWithNull(third.R));
			$('#a2').text(stringWithNull(third.A));
			$('#i2').text(stringWithNull(third.I));
			$('#s2').text(stringWithNull(third.S));
			$('#e2').text(stringWithNull(third.E));
			$('#c2').text(stringWithNull(third.C));
			setupChart(2, third);
			//设置喜欢职业
			var forth = data.forth;
			$('#r3').text(stringWithNull(forth.R));
			$('#a3').text(stringWithNull(forth.A));
			$('#i3').text(stringWithNull(forth.I));
			$('#s3').text(stringWithNull(forth.S));
			$('#e3').text(stringWithNull(forth.E));
			$('#c3').text(stringWithNull(forth.C));
			setupChart(3, forth);
			//设置总分
			var totalscore = data.totalscore;
			$('#r4').text(stringWithNull(totalscore.R));
			$('#a4').text(stringWithNull(totalscore.A));
			$('#i4').text(stringWithNull(totalscore.I));
			$('#s4').text(stringWithNull(totalscore.S));
			$('#e4').text(stringWithNull(totalscore.E));
			$('#c4').text(stringWithNull(totalscore.C));
			setupChart(4, totalscore);
			//设置详情数据
			detailParam = data.sort_type;
			
		}
		function setupChart(index, data){
			var chartid = 'ganxingqi';
			var maxR = 10;
			var maxA = 10;
			var maxI = 10;
			var maxS = 10;
			var maxE = 10;
			var maxC = 10;
			var color = '#b32225';
			if(index == 2){
				chartid = 'shangchang';
				color = '#243641';
			}else if(index == 3){
				chartid = 'xihuan';
				maxR = 9;
				maxA = 9;
				color = '#508f97';
			}else if(index == 4){
				chartid = 'zongti';
				maxR = 29;
				maxA = 29;
				maxI = 30;
				maxS = 30;
				maxE = 30;
				maxC = 30;
				color = '#c76e52';
			}
			var myChart = echarts.init(document.getElementById(chartid));
			myChart.setOption({
				title: {
			        x: 'center',
			        y: 'center'
			    },
			    radar: {
			        name: {
			            textStyle: {
			                color: '#333'
			           }
			        },
			        indicator: [
			           { name: 'R型', max: maxR},
			           { name: 'A型', max: maxA},
			           { name: 'I型', max: maxI},
			           { name: 'S型', max: maxS},
			           { name: 'E型', max: maxE},
			           { name: 'C型', max: maxC}
			        ]
			    },
				series: [
				    {
				        type: 'radar',
				        // label: {
				        //     normal: {
				        //         show: true,
				        //         position: 'center'
				        //     },
				        //     emphasis: {
				        //         show: true
				        //     }
				        // },
				        labelLine: {
				            normal: {
				                show: true
				            }
				        },
				        data:[
				            {
				                value : [
				                	stringWithNull(data.R),
				                	stringWithNull(data.A), 
				                	stringWithNull(data.I), 
				                	stringWithNull(data.S), 
				                	stringWithNull(data.E), 
				                	stringWithNull(data.C)
				                ],
				                name : ''
				            }
				        ],
				        color:[color]
				    }
				]
			});
		}
		function toDetailClick(){
			if (detailParam == null || detailParam == '') {
				return;
			}
			api.openWin({useWKWebView:true,
			    name: 'HolandeAnalysisDetail_window',
			    url: 'HolandeAnalysisDetail_window.html',
			    pageParam: detailParam
			});
		}
	</script>
</html>